<template>
	<view class="setPayPw">
		<view class="u-f-ac set-li">
			<view class="prefix">+86</view>
			<view>{{memberPhone}}</view>
		</view>
		<form @submit="save">
			<view class="u-f-jsb u-f-ac set-li">
				<input type="text" placeholder="请输入验证码" name="msg" placeholder-style="color:#aaa">
				<countdown :phone="memberPhone" type="setPayPw"></countdown>
			</view>
			<view class="u-f-jsb u-f-ac set-li">
				<text >密码</text>
				<input type="password" class="flex1" placeholder="请输入支付密码" name="password" placeholder-style="color:#aaa">
			</view>
			<view class="u-f-jsb u-f-ac set-li mb100">
				<text >确认密码</text>
				<input type="password" class="flex1" placeholder="请确认支付密码" name="confirmPwd" placeholder-style="color:#aaa">
			</view>
			<tui-button formType="submit" width="650rpx" type="primary" :shadow="true" shape="circle" :size="30">确定</tui-button>
		</form>
	</view>
</template>

<script>
export default{
	data(){
		return{
			memberPhone: '15818271188',
		}
	},
	methods:{
		save(e){
			console.log(e.detail.value)
		}
	}
}
</script>

<style>
page {
	background-color: #fff;
}
</style>
<style scoped lang="scss">
.setPayPw {
	padding: 60rpx 50rpx;
}
.set-li {
	padding: 19rpx 0;
	margin-bottom: 40rpx;
}
.mb100 {
	margin-bottom: 100rpx;
}
.set-li,
.set-li input,
.set-li text {
	font-size: 24rpx;
}
.prefix {
	border-right: 2rpx solid #eee;
	padding-right: 28rpx;
	margin-right: 28rpx;
}
.flex1{
	flex: 1;
}
</style>
